<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1000" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false" :close-on-press-escape="mode != 'show' ? false : true" draggable overflow>
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" label-width="130" ref="dialogForm">
            <el-row :gutter="1">
                <el-col :xs="24" :span="8">
					<el-form-item label="日期" prop="test_date">
						<el-date-picker v-model="form.test_date" type="date" placeholder="请选择日期" :value-format="'YYYY-MM-DD'" style="width:100%" />
					</el-form-item>
				</el-col>
                <el-col :xs="24" :span="8">
					<el-form-item label="检验单号" prop="test_code">
                        <el-input v-model="form.test_code" readonly></el-input>
					</el-form-item>
				</el-col>
                <el-col :xs="24" :span="8">
					<el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" clearable placeholder="请输入备注"></el-input>
					</el-form-item>
				</el-col>
            </el-row>
            <el-form-item label="检验人员" prop="work_uids">
                <template #label>
                    <div>
                        <div>检验人员</div>
                        <el-button type="primary" text size="small" @click="select_user">选择</el-button>
                    </div>
                </template>
                <div class="border">
                    <el-tag v-for="(item,index) in userList" :key="index" closable type="info" style="margin-right: 20px" @close="delTag(index)">
                        {{ item.name }}
                    </el-tag>
                </div>
            </el-form-item>
            <el-row :gutter="1">
                <el-col :xs="24" :span="8">
					<el-form-item label="成本价" prop="base_price">
                        <el-input v-model="form.base_price" clearable placeholder="请输入成本价"></el-input>
					</el-form-item>
				</el-col>
                <el-col :xs="24" :span="6">
					<el-form-item label="品名: " prop="goods_name">
                        {{goods_name}}
					</el-form-item>
				</el-col>
                <el-col :xs="24" :span="6">
					<el-form-item label="供应商: " prop="apply_name">
                        {{apply_name}}
					</el-form-item>
				</el-col>
            </el-row>
            <el-form-item>
                <template #label>
                    <el-link type="primary" :underline="false" @click="checkHouse">入库单选择</el-link>
                </template>
                <el-tag v-for="(item,index) in houseList" :key="index" :closable="mode == 'edit' ? item.is_del == 0 : ''" type="info" style="margin-right: 20px" @close="delHouse(index)">
                    {{ item.purchase_ware_code }}
                </el-tag>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible=false">取 消</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit(0)">保 存</el-button>
        </template>
    </el-dialog>
    <select-house v-if="dialog.house" ref="houseDialog" @success="handleSuccess" @closed="dialog.house = false" :query="{can_test: 1, status: 1}"></select-house>
    <select-admin v-if="dialog.admin" ref="adminDialog" @success="adminBack" @closed="dialog.admin = false"></select-admin>
</template>

<script>
import selectHouse from './selectHouse'
import selectAdmin from '@/views/setting/admin/selectAdmin.vue';
export default {
    emits: ['success', 'closed'],
    components: {
        selectHouse, selectAdmin
    },
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增检验单',
                edit: '编辑检验单',
                show: '查看检验单',
            },
            visible: false,
            isSaveing: false,
            dialog: {
                house: false,
				admin: false,
            },
            form: {
                id: "",
                test_code: "",
                test_date: this.moment().format('YYYY-MM-DD'),
                remark: "",
                base_price: "",
                purchase_ware_ids: [],
                apply_id: "",
                work_uids: []
            },
            rules: {
                plan_name: [ {required: true, message: '请输入采购计划名称'} ],
            },
            goods_name: "",
            apply_name: "",
            houseList: [],
            userList: [],
        }
    },
    mounted() {
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单提交方法
        submit() {
            if(this.houseList.length == 0) return this.$message.error('请选择入库单')
            if(this.userList.length == 0) return this.$message.error('请选择检验人员')
            this.form.purchase_ware_ids = this.houseList.map(item=>item.id)
            this.form.work_uids = this.userList.map(item=>item.id)
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    // this.isSaveing = true;
                    var res = await this.$API.business.inspect.order[this.form.id ? 'edit' : 'add'].post(this.form);
                    // this.isSaveing = false;
                    if (res.code == 1) {
                        this.visible = false;
                        this.$emit('success', this.form, this.mode)
                        this.$message.success("操作成功")
                    } else {
                        this.$alert(res.message, "提示", {type: 'error'})
                    }
                }
            })
        },
        //表单注入数据
        async setData(data) {
            this.form.id = data.id
            var res = await this.$API.business.inspect.order.detail.get({id: data.id});
            this.form.test_code = res.data.test_code
            this.form.test_date = res.data.test_date
            this.form.base_price = res.data.base_price
            this.form.remark = res.data.remark
            this.form.purchase_ware_ids = res.data.purchase_ware_ids
            this.form.apply_id = res.data.apply_id
            this.goods_name = res.data.goods_name
            this.apply_name = res.data.apply?.apply_name
            let array = []
            res.data.purchase_ware_code.map(item=>{
                array.push({
                    id: item.id,
                    purchase_ware_code: item.purchase_ware_code,
                    is_del: item.use_number,
                })
            })
            this.houseList = array
            this.userList = res.data.work_uids_name.map(item=>({
                id: item.id,
                name: item.name,
            }))
        },
        // 选择入库单
        checkHouse(){
            if(this.mode == 'show') return
            this.dialog.house = true
            this.$nextTick(() => {
                this.$refs.houseDialog.open('add')
            })
        },
        // 选择入库返回
        handleSuccess(data){
            data.map(item=>{
                let exist = this.common.isExist(item.id, this.houseList, 'id')
				if (exist) return
                let form = {
                    id: item.id,
                    purchase_ware_code: item.purchase_ware_code
                }
                this.houseList.push(form)
            })
            this.goods_name = data[0].goods_name
            this.apply_name = data[0].apply?.apply_name
            this.form.apply_id = data[0].apply_id
        },
        delHouse(index){
            this.houseList.splice(index,1)
        },

        select_user(){
            this.dialog.admin = true
            this.$nextTick(() => {
                this.$refs.adminDialog.open()
            })
        },
        adminBack(data){
            let array = []
            data.map(item=>{
                let exist = this.common.isExist(item.id, this.userList, 'id')
                if (exist) {
                    return
                }
                array.push({
                    id: item.id,
                    name: item.name,
                })
            })
			this.userList = [...this.userList, ...array]
        },
        delTag(index){
            this.userList.splice(index,1)
        }
    }
}
</script>

<style >
.el-input-group__append{
    color: #098;
}
.border{
    width: 100%;
    height: 100px;
    border: 1px solid #dcdfe6;
    padding: 5px;
}
</style>
